<html>
<head>
<title>JavaScript file upload</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
if(!XMLHttpRequest.prototype.sendAsBinary){  
      XMLHttpRequest.prototype.sendAsBinary = function(datastr) {  
        function byteValue(x) {  
          return x.charCodeAt(0) & 0xff;  
        }  
        var ords = Array.prototype.map.call(datastr, byteValue);  
        var ui8a = new Uint8Array(ords);  
        this.send(ui8a.buffer);  
      };  
    }   
    
var Uploader = function(form) {
    this.form = form;
};

Uploader.prototype = {
    /**
     * @param Object HTTP headers to send to the server, the key is the
     * header name, the value is the header value
     */
    headers : {},
    imgdatas: {},

    send2: function(file) {
        var formData = new FormData();

        formData.append("username", "Groucho");
        formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"

        // HTML file input, chosen by user
        formData.append("userfile", file);

        // JavaScript file-like object
        var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
        var blob = new Blob([content], { type: "text/xml", filename: 'a.xml'});

        formData.append("webmasterfile", blob);

        var xhr = new XMLHttpRequest;
        xhr.open("POST", this.form.action, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                alert(xhr.responseText);
            }
        };
        xhr.send(formData);
    }
};
var readfile = function(file) {
    var reader1 = new FileReader();
    var reader2 = new FileReader();
    var reader3 = new FileReader();
    var reader4 = new FileReader();

    reader1.onload = reader2.onload = reader3.onload = reader4.onload = function (e) {
        //$('#blah').attr('src', e.target.result);
        console.log (e);
        console.log ("length", e.target.result.length);
        console.log (e.target.result);
    }

    reader1.readAsDataURL(file);
    //reader2.readAsArrayBuffer(file);
    //reader3.readAsText(file);
    //reader4.readAsBinaryString(file);
    
}

window.addEventListener("load", function() {
    var input = document.getElementById("photo");
    var img = document.getElementById("img");
    var previewBtn = document.getElementById("preview");

    var form = document.getElementsByTagName("form")[0];
    var uploader = new Uploader(form);
    var uploadBtn = document.getElementById("upload");

    previewBtn.addEventListener("click", function() {
        var reader1 = new FileReader();
        var reader2 = new FileReader();
        reader1.onload = function (e) {
            console.log (e);
            console.log ("length", e.target.result.length);
            console.log (e.target.result);
            img.src = e.target.result;
            //uploader.imgdatas[input.files[0].name] = e.target.result;
        }
        reader2.onload = function (e) {
            uploader.imgdatas[input.files[0].name] = e.target.result;
        }
        reader1.readAsDataURL(input.files[0]);
        reader2.readAsBinaryString(input.files[0]);
        //img.src = input.files[0].getAsDataURL();
    }, false);

    uploadBtn.addEventListener("click", function() {
        //uploader.send();
        uploader.send2(input.files[0]);
    }, false);

}, false);

</script>
</head>
<body>


<form action="/apis/upload/form" method="post"
      enctype="multipart/form-data"
      onsubmit="return false;">
  <fieldset>
    <legend>Upload photo</legend>
    <label for="image_name">Image name:</label>
    <input type="text" name="image_name" id="image_name"> |
    <label for="image_type">Image type:</label>
    <select name="image_type" id="image_type">
      <option>JPEG</option>
      <option>PNG</option>
      <option>GIF</option>
    </select> |
    <input type="file" name="photo" id="photo">
    <input type="submit" value="Upload" id="upload">
    <input type="submit" value="Preview" id="preview">
    <hr>
    <img src="" alt="image preview" id="img">
  </fieldset>
</form>
</body>
</html>
